<template>
  <a-form-model :model="form" ref="ruleForm" :label-col="labelCol"
    :wrapper-col="wrapperCol">
    <a-form-model-item
	 label="新闻类型"
    >
      <a-select v-decorator="['owner', {rules:[{required: true, message: '新闻类型'}]}]" v-model="form.news_type">
        <a-select-option :value="'1'">行业资讯</a-select-option>
        <a-select-option :value="'2'">企业动态</a-select-option>
      </a-select>
    </a-form-model-item>
	<a-form-model-item
	 label="新闻标题"
	  ref="news_title"
	   prop="news_title"
	>
		<a-input
		  v-model="form.news_title"
		  @blur="
			() => {
			  $refs.news_title.onFieldBlur();
			}
		  "
		/>
	</a-form-model-item>
	<a-form-model-item
	  label="新闻简介"
	>
	<a-input
	  v-model="form.news_dec"
	/>
	</a-form-model-item>
	<a-form-model-item
	  label="新闻跳转链接"
	>
	<a-input
	  v-model="form.news_url"
	/>
	</a-form-model-item>
	<a-form-model-item
	  label="新闻作者"
	>
	<a-input
	  v-model="form.news_writer"
	/>
	</a-form-model-item>
	<a-form-model-item
	  label="新闻发布时间"
	>
		 <a-date-picker show-time placeholder="选择新闻发布时间" v-model="form.news_date" valueFormat="YYYY-MM-DD HH:mm:ss"/>
		<!-- <a-date-picker>
	      <template slot="dateRender" slot-scope="current, today">
	        <div class="ant-calendar-date" :style="getCurrentStyle(current, today)">
	          {{ current.date() }}
	        </div>
	      </template>
	    </a-date-picker> -->
	</a-form-model-item>
    <a-form-model-item
      label="新闻封面"
    >
	<my-upload field="file"
			:noCircle="true"
			:noSquare="true"
			:width="380"
			:height="206"
			 @crop-upload-success="cropUploadSuccess"
			url="https://admin.lhlzgroup.com/api/upload/img"
			:params="params"
			:headers="headers"
			v-model="show"
			img-format="png"></my-upload>
			<a-button v-if="form.news_src == ''" type="primary" @click="toggleShow">
			  选择图片
			</a-button>
			<img v-else :src="vuex_src+form.news_src" alt="" @click="toggleShow">
	<!-- <a-upload
	       action="https://admin.lhlzgroup.com/api/upload/img"
	      list-type="picture-card"
	      :file-list="fileList"
	      @preview="handlePreview"
	      @change="handleChange"
	    >
	      <div v-if="fileList.length < 1">
	        <a-icon type="plus" />
	        <div class="ant-upload-text">
	          Upload
	        </div>
	      </div>
	    </a-upload>
	    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
	      <img alt="example" style="width: 100%" :src="previewImage" />
	    </a-modal> -->
     <!-- <a-upload-dragger
          name="file"
          action="http://192.168.0.103:3000/upload/img"
          @change="handleChange"
		  method="post"
        >
          <p class="ant-upload-drag-icon">
            <a-icon type="inbox" />
          </p>
          <p class="ant-upload-text">
            点击或拖拽图片至此上传
          </p>
        </a-upload-dragger> -->
    </a-form-model-item>
  </a-form-model>
</template>

<script>
import {uploadImg} from '@/api/upload.js'	
import {newsCreat,newsEdit} from '@/api/news.js'	
import myUpload from 'vue-image-crop-upload/upload-2.vue';

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
const fields = ['title', 'startAt', 'owner', 'description']

export default {
  name: 'addnew',
  props: {
    record: {
      type: Object,
      default: null
    }
  },
  components: {
		'my-upload': myUpload
	},
  data () {
    return {
     labelCol: { span: 4 },
     wrapperCol: { span: 14 },
	  previewVisible: false,
	  previewImage: '',
	  fileList:[],
	  show:false,
	  params: {},
		headers: {
		},
		imgDataUrl: '', // the datebase64 url of created image
      form: {
		  news_type:'1',
		  news_src:'',
		  news_title:'',
		  news_dec:'',
		  news_url:'',
		  news_date:'',
		  news_writer:'',
	  },
    }
  },
  mounted () {
	  if (this.record.id) {
	  	this.form = JSON.parse(JSON.stringify(this.record));
		// this.fileList.push({
		//   uid: '-1',
		//   name: 'image.png',
		//   status: 'done',
		//   url: this.vuex_src+this.form.news_src,
		// },)
	  }
  },
  methods: {
	  
     handleCancel() {
	   this.previewVisible = false;
	 },
	 async handlePreview(file) {
	   if (!file.url && !file.preview) {
		 file.preview = await getBase64(file.originFileObj);
	   }
	   this.previewImage = file.url || file.preview;
	   this.previewVisible = true;
	 },
	 handleChange({ fileList }) {
	   this.fileList = fileList;
	 },
	toggleShow() {
		this.show = !this.show;
	},
	cropUploadSuccess(jsonData, field){
		console.log('-------- upload success --------');
		console.log(jsonData);
		this.form.news_src = jsonData.url
		console.log('field: ' + field);
	},
	 upload(e){
		 console.log(e)
		let formData=new FormData();
		formData.append('file',e.file)
		console.log(formData) 
		uploadImg(formData).then(res=>{
		})
	 },
    onOk () {
		 console.log('监听了 modal ok 事件')
		if(this.record.id){
				// if(this.fileList.length>0&&this.fileList[0].uid!=-1){
				// 	 this.form.news_src = this.fileList[0].response.url;
				// }
			 // 编辑
				return new Promise(resolve => {
					newsEdit(this.form).then(res=>{
					  resolve(true)
					})
				})
		}else{
			 // 创建
			 // if(this.fileList.length>0){
				//  this.form.news_src = this.fileList[0].response.url;
			 // }
			 return new Promise(resolve => {
			 	newsCreat(this.form).then(res=>{
			 	  resolve(true)
			 	})
			 })
		}
    },
    onCancel () {
      console.log('监听了 modal cancel 事件')
      return new Promise(resolve => {
        resolve(true)
      })
    },
    handleSubmit () {
      const { form: { validateFields } } = this
      this.visible = true
      validateFields((errors, values) => {
        if (!errors) {
          console.log('values', values)
        }
      })
    }
  }
}
</script>
